<template>
	<!-- 新增人员 -->
	<view class="container">
		<c-navBar title="新增人员" isPerch></c-navBar>
		<view class="item" v-for="(item, index) in persons" :key="index">
			<view class="title-box">
				<view class="title">新增人员{{ index + 1 }}</view>
				<view class="delete" @click="delete1(index)">删除</view>
			</view>

			<view class="input-box">
				<view class="text">姓名</view>
				<u-input v-model="persons[index].workerName" inputAlign="right" border="none"
					placeholderClass="placeholder" placeholder="请输入姓名">
				</u-input>
			</view>

			<view class="input-box">
				<view class="text">联系电话</view>
				<u-input type="number" v-model="persons[index].workerPhone" inputAlign="right" border="none"
					placeholderClass="placeholder" placeholder="请输入联系电话">
				</u-input>
			</view>

			<view class="input-box">
				<view class="text">所属班组</view>
				<u-input v-model="persons[index].group" type="group" inputAlign="right" border="none"
					placeholderClass="placeholder" placeholder="请输入所属班组">
				</u-input>
			</view>

			<view class="input-box" @click="selectType(index)">
				<view class="text">工种</view>
				<u-input v-model="persons[index].workType" inputAlign="right" disabled border="none"
					placeholderClass="placeholder" placeholder="请选择工种">
					<template #suffix>
						<image style="width: 24rpx; height: 24rpx" src="/static/home/right2.png" mode="scaleToFill" />
					</template>
				</u-input>
			</view>
		</view>
		<!-- 工种选择器 -->
		<u-picker :show="show" :columns="columns" @cancel="show = false" @confirm="confirm"></u-picker>

		<view class="add" @click="add">+ 添加人员</view>

		<view class="btn-box">
			<view class="btn" @click="submit">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				columns: [
					['技工', '普工']
				],
				index: 0,
				persons: [{
					workerName: '',
					workerPhone: '',
					group: '',
					workType: '',
				}],
				projectId: '',
			}
		},
		onLoad(e) {
			this.projectId = e.projectId;
		},
		methods: {
			delete1(index) {
				this.persons.splice(index, 1)
			},
			add() {
				this.persons.push({
					workerName: '',
					workerPhone: '',
					group: '',
					workType: ''
				})
			},
			selectType(index) {
				this.index = index
				this.show = true
			},
			confirm({
				value
			}) {
				this.persons[this.index].workType = value[0]
				this.show = false
			},
			submit() {
				let pass = true
				this.persons.some((item, index) => {
					item.projectId = this.projectId;
					if (!item.workerName) {
						pass = false
						uni.showToast({
							title: `请输人员${index+1}入姓名`,
							icon: 'none'
						})
						return true
					}
					if (!this.$fn.phoVerify(item.workerPhone)) {
						pass = false
						// uni.showToast({
						// 	title: `请输入人员${index+1}联系电话`,
						// 	icon: 'none'
						// })
						return true
					}
					if (!item.group) {
						pass = false
						uni.showToast({
							title: `请输入人员${index+1}所属班组`,
							icon: 'none'
						})
						return true
					}
					if (!item.workType) {
						pass = false
						uni.showToast({
							title: `请选择人员${index+1}工种`,
							icon: 'none'
						})
						return true
					}

				})

				if (!pass) return

				this.persons.forEach((item, index) => {
					this.$api.workerUpdate(item).then(res => {

						if (index == this.persons.length - 1 && res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: '操作成功'
							})
							uni.navigateBack()
						}
					})
				})
				console.log(this.persons);
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		overflow: auto;
		padding-bottom: 200rpx;
	}

	.item {
		margin-bottom: 30rpx;

		.title-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx 20rpx;
			background: #F7F7F7;

			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #00693A;
				line-height: 38rpx;
			}

			.delete {
				font-weight: 500;
				font-size: 24rpx;
				color: #E66950;
				line-height: 28rpx;
			}
		}

		.input-box {
			display: flex;
			align-items: center;
			padding: 20rpx 0rpx;
			margin: 0 20rpx;
			border-bottom: 1rpx solid #E6E6E6;

			.text {
				font-weight: 500;
				font-size: 32rpx;
				color: #1A1A1A;
			}

			/deep/ .placeholder {
				font-weight: 400;
				font-size: 24rpx;
				color: #999 !important;
			}

			/deep/ .u-input__content {
				background: #fff;
			}


		}
	}

	.add {
		width: 686rpx;
		height: 80rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 1rpx solid #00693A;
		margin: 0 auto;


		font-weight: 500;
		font-size: 28rpx;
		color: #00693A;
		line-height: 80rpx;
		text-align: center;
	}
</style>